import React, {PureComponent} from 'react'
import {setTitle, scale, tooltip, mapLineStyle, mapEffectStyle, baseTextStyle, colors} from '../chart/util/common'

class TemperImg extends PureComponent {

    constructor() {
        super()
        this.state = {
            scale: 1
        }
    }

    componentDidMount() {
        const {src, size} = this.props
        const {clientWidth, clientHeight} = this.refs.svg
        this.setState({
            scale: clientWidth / size[0] / scale,
        })
    }

    render() {
        const {src, size, device = [], handClick} = this.props
        const {scale} = this.state
        return (
            <svg ref='svg'
                 viewBox={`0 0 ${size.join(' ')}`}
                 preserveAspectRatio="xMidYMin">
                {/*layout*/}
                <image x="0" y="0" width={size[0]} height={size[1]}
                       xlinkHref={src}/>
                {device.map((d, i) => {
                    return <g className="temper-device-group" key={`temper-img-${i}`}>
                        <image x={d.pos[0]} y={d.pos[1]} width={32 / scale} height={32 / scale}
                               onClick={handClick}
                               fill="transparent"
                               xlinkHref='../images/ui/video-on.png'/>
                    </g>;
                })}

            </svg>
        )
    }

}

export default TemperImg